<template>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="padding: 20px;padding-bottom: 50px;">
      <el-button type="primary"
                 icon="el-icon-plus"
                 @click="sureAdd" style="position: absolute;z-index: 999;top: 69px;left: 35px;" id="sureAdd">设置</el-button>
    <el-tab-pane label="图片轮播数据" name="first" id="tabclass1">
        <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      :page="page"
      @on-load="onLoad">
        </avue-crud>
      <el-divider content-position="left">已选择数据</el-divider>
      <el-button type="danger"
                 icon="el-icon-delete-solid"
                 @click="sureDel" style="position: relative;z-index: 999;bottom: -50px;left: 35px;">删除</el-button>
      <avue-crud
      class="del"
      :option="option2"
      :table-loading="loading2"
      :data="data2"
      ref="crud"
      :permission="permissionList"
      @search-change="searchChange"
      @selection-change="selectionChange2"
      @on-load="onLoad2">
        </avue-crud>
  
    </el-tab-pane>

    <el-tab-pane label="精选首页" name="second" @tab-click="handleClick" id="tabclass2">
      <avue-crud
      :option="option3"
      :table-loading="loading3"
      :data="data3"
      ref="crud"
      v-model="form2"
      :permission="permissionList"
      @search-change="searchChange2"
      @search-reset="searchReset2"
      @selection-change="selectionChange2"
      @current-change="currentChange2"
      @size-change="sizeChange2"
      :page="page2"
      @on-load="onLoad3">
      <template slot-scope="scope" slot="menu">
          <el-button type="primary"
               icon="el-icon-edit"
               size="small"
               plain
               @click="Editdta(scope.row)">编辑首页文案</el-button>
      </template>
    </avue-crud>
    <el-divider content-position="left">已设置数据</el-divider>
    <el-button type="danger"
                 icon="el-icon-delete-solid"
                 @click="sureDel" style="position: relative;z-index: 999;bottom: -110px;left: 35px;">删除</el-button>
    <avue-crud
      :option="option4"
      :table-loading="loading4"
      :data="data4"
      ref="crud"
      :permission="permissionList"
      @search-change="searchChange3"
      @search-reset="searchReset3"
      @selection-change="selectionChange2"
      @current-change="currentChange3"
      @size-change="sizeChange3"
      :page="page3"
      @on-load="onLoad4">
    </avue-crud>


    <el-dialog title="编辑文案" :visible.sync="dialogTableVisible">
      <div>
        <el-image v-for="it in item.imglist" :src="it" ref="preview" :preview-src-list="item.imglist" style="width:35%; height: 20vh; margin: 5px;cursor: pointer;"></el-image>
        <el-form :model="Editform">
          <el-form-item label="封面图" v-if="item.imglist.length>1">
            <el-radio-group v-model="Editform.coverimg" size="medium">
                <el-radio v-for="(it,index) in item.imglist" :key="index" :label="parseInt(index)+1" ></el-radio>
              </el-radio-group>
            </el-form-item>
          <el-form-item label="主题:" label-width="45px" style="color:red !important;">
            <el-input type="textarea" v-model="Editform.theme"></el-input>
          </el-form-item>
          <el-form-item label="文案:" label-width="45px">
            <el-input type="textarea" v-model="Editform.text"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary"
               icon="el-icon-edit"
               size="small"
               @click="sure()">确定</el-button>
      </div>
    </el-dialog>
    </el-tab-pane>

    <el-tab-pane label="分类管理、通知" name="four" @tab-click="handleClick" id="tabclass4">
      <el-row>
         <el-col :span="8" style="border: 1px solid #ccc;padding: 10px;border-radius: 10px;">
           <el-row>
              <el-form style="display: inline-block;margin-top: 10px;width:100%;">
                <el-input v-model="searchform.classifyName" placeholder="输入分类名查询" style="width: 70%;"></el-input>
                <el-button style="padding: 7px;width: 50px;height: 40px;border: 1px solid #ccc;display: inline-block;margin: 0;" icon="el-icon-search" plain  type="primary" @click="searchClassify"></el-button>
                <el-button style="padding: 7px;width: 50px;height: 40px;border: 1px solid #ccc;display: inline-block;margin: 0;" icon="el-icon-delete-solid" plain  type="primary" @click="searchClearClassify"></el-button>
                <el-button style="padding: 7px;width: 50px;height: 40px;border: 1px solid #ccc;display: inline-block;margin: 0;" icon="el-icon-circle-plus" plain  type="primary" @click="aadClassify"></el-button>
              </el-form>
           </el-row>
            <div class="classBox" v-if="classifydata.length>0">
              <el-collapse>
              <el-collapse-item v-for="(item,inex) in classifydata" :name="item.classifyId">
                <template #title>
				        	<h3 class="collapse-title flex" slot="title">{{ item.classifyName }}</h3>
				        </template>

                <template #right-icon>
				        	<i class="el-icon-arrow-right">123</i>
				        </template>

                <div v-for="(item2,index) in item.children" style="padding: 10px;cursor: pointer;" class="Children">
                  <el-checkbox v-model="item2.checked" @change="changeClassify(item2.checked,item2)">{{ item2.vegetables }}</el-checkbox>
                </div>
              </el-collapse-item>
            </el-collapse>
            </div>
            <h2 v-else>没有分类标签数据</h2>
         </el-col>
         
         <el-col :span="2" style="text-align: center;">
          <el-row>
            <el-button type="primary" plain icon="el-icon-arrow-left" @click="editClassify">添加</el-button>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-button type="primary" plain icon="el-icon-arrow-right" @click="removeClassify">移除</el-button>
          </el-row>
         </el-col>

         <el-col :span="14">
          <avue-crud
             :option="option5"
             :table-loading="loading5"
             :data="data5"
             ref="crud"
             @search-change="searchChange4"
             @search-reset="searchReset4"
             @selection-change="selectionChange3"
             @current-change="currentChange4"
             @size-change="sizeChange4"
             :page="page4"
             @on-load="onload5">
           </avue-crud>
         </el-col>
      </el-row>
     
      <el-dialog
    title="添加"
    :visible.sync="dialogVisible"
    icon-class="el-icon-arrow-right"
    width="30%"
    default-expand-all="true"
    :before-close="handleClose" style="overflow: auto;">
    <el-form ref="form" :model="form" label-width="80px" style="height: 20%;">
  <el-form-item label="分类标签">
    <el-input v-model="classifyform.classifyName" placeholder="分类标签"></el-input>
  </el-form-item>
  <el-row>
    <el-button icon="el-icon-check" type="primary" style="float: right;" @click="sureClassify">确定</el-button>
  </el-row>
    </el-form>
      </el-dialog> 

      <el-dialog
    title="添加"
    :visible.sync="dialogVisible2"
    icon-class="el-icon-arrow-right"
    width="30%"
    default-expand-all="true"
    :before-close="handleClose" style="overflow: auto;">
    <el-form ref="form" :model="form" label-width="80px" style="height: 20%;">
      <el-table :data="classifydata" style="width: 100%">
      <el-table-column prop="classifyId" label="选择分类标签(只能选择一个)">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isselect"
              active-color="#13ce66"
              inactive-color="#C0CCDA"
              @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="classifyName" label="分类标签">
      </el-table-column>
    </el-table>
  <el-row>
    <el-button icon="el-icon-check" type="primary" style="float: right;" @click="sureClassify2">确定</el-button>
  </el-row>
    </el-form>
      </el-dialog>
      
      
    </el-tab-pane>
  </el-tabs>
   
  

</template>   

<script>
import {setStore, getStore} from '@/util/store'
import {getList,getimgLb,addBasicimg,Delimg,getList2,insertBasic,getClassifyList,InsertClassify,UpdateClassify,UpdateVegeClassify} from '@/api/system/basicdata'
import { formToJSON } from "axios";
import { done } from 'nprogress';

export default{
    data(){
        return{
          classifyform:{},
          searchform:{},
          classifydata:[],
          selectClassifyId:[],
          removeClassifyId:[],
          activeName:1,
          dialogVisible:false,
          dialogVisible2:false,
          userId:parseInt(getStore({name: 'userInfo'}).userId),
          roleId:parseInt(getStore({name: 'userInfo'}).roleId),
          placeId:getStore({name: 'userInfo'}).placeId,
          Editform:{
            basicdata:"",
            bodydata:""
          },
          item:{
            imglist:[]
          },
          gridData:[],
          dialogTableVisible:false,
          activeName:'first',
          query: {},
          loading:false,
          loading2:false,
          loading3:false,
          loading4:false,
          loading5:false,
          selectList:[],
          selectVegeList:[],
          selectListDel:[],
          page:{
            pageSize: 10,
            currentPage: 1,
            total: 1
          },
          page2:{
            pageSize: 10,
            currentPage: 1,
            total: 1
          },
          page3:{
            pageSize: 10,
            currentPage: 1,
            total: 1
          },
          page4:{
            pageSize: 10,
            currentPage: 1,
            total: 1
          },
          form:{},
          form2:{},
          data:[],
          data2:[],
          data3:[],
          data4:[],
          data5:[],
          option:{
              searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: false,
              border: true,
              selection: true,
              delBtn: false,
              addBtn:false,
              editBtn:false,
              menu:false,
              height:'auto',
              column:[
                {
                    label:"类名",
                    prop:"vegetables",
                    search:true
                },
                {
                    label:"图片",
                    align:"center",
                    prop:"imgUrl",
                    type:"upload"
                },
                {
                    label:"蔬菜id",
                    align:"center",
                    prop:"vegetablesId",
                    hide:true
                },

              ]
            },
            option2:{
              searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: true,
              border: true,
              selection: true,
              delBtn: false,
              addBtn:false,
              editBtn:false,
              menu:false,
              height:'auto',
              column:[
                {
                  label:"图片",
                  prop:"imgurls",
                  type:"upload",
                  align:"center"
                },
                {
                  label:"品类",
                  prop:"vage"
                },
                {
                  label:"操作人",
                  prop:"name"
                }
              ]
            },
            option3:{
              searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: true,
              border: true,
              selection: true,
              delBtn: false,
              addBtn:false,
              editBtn:false,
              height:'auto',
              column:[
                {
                    label:"类名",
                    prop:"vegetables",
                    search:true
                },
                {
                    label:"图片",
                    prop:"imgUrl",
                    type:"upload"
                }
              ]
            },
            option4:{
              searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: true,
              border: true,
              selection: true,
              delBtn: false,
              menu:false,
              addBtn:false,
              editBtn:false,
              height:'auto',
              column:[
                {
                    label:"类名",
                    prop:"vage",
                    search:true
                },
                {
                    label:"图片",
                    prop:"imgurl",
                    type:"upload"
                },
                {
                    label:"主题",
                    prop:"theme"
                },
                {
                    label:"文案",
                    prop:"text"
                }
              ]
            },
            option5:{
              searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: true,
              border: true,
              selection: true,
              delBtn: false,
              menu:false,
              seatch:false,
              editBtn:false,
              height:'auto',
              column:[
                {
                    label:"类名",
                    prop:"vegetables",
                    search:true
                },
                {
                    label:"图片",
                    prop:"imgUrl",
                    type:"upload"
                }
              ]
            },
        }
    },
    mounted(){
      this.selectClassify();
    },
    methods:{
      addClassify(data,done){
         console.log(123);
         console.log(data);
         done(); 
      },
      Editdta(row){
        console.log(row);
        this.dialogTableVisible=true;
        this.item = row;
        this.Editform={};
      },
      searchReset() {
        this.parentId = 0;
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      searchReset2() {
        this.parentId = 0;
        this.onLoad3(this.page);
      },
      searchChange2(params, done) {
        this.page2.currentPage = 1;
        this.onLoad3(this.page, params);
        done();
      },
      searchChange3(params, done){
        console.log(params);
        this.page3.currentPage = 1;
        this.onLoad4(this.page, params);
        done();
      },
      searchReset3() {
        this.parentId = 0;
        this.onLoad4(this.page);
      },
      searchChange4(params, done){
        console.log(params);
        this.page4.currentPage = 1;
        this.onload5(this.page, params);
        done();
      },
      searchReset4() {
        this.parentId = 0;
        this.onload5(this.page);
      },
      handleClick(event){
        var dom = document.getElementById("sureAdd");
        if(event.$attrs.id==="tabclass1"){
          dom.style.display = "block";
        }else{
          dom.style.display = "none";
        }
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      currentChange2(currentPage) {
        this.page2.currentPage = currentPage;
      },
      sizeChange2(pageSize) {
        this.page2.pageSize = pageSize;
      },
      currentChange3(currentPage) {
        this.page3.currentPage = currentPage;
      },
      sizeChange3(pageSize) {
        this.page3.pageSize = pageSize;
      },
      currentChange4(currentPage) {
        this.page4.currentPage = currentPage;
      },
      sizeChange4(pageSize) {
        this.page4.pageSize = pageSize;
      },

      onLoad(page, vegetables={}) {
        console.log(123);
        this.loading = false;
        vegetables["userId"] = this.userId;
        vegetables["roleId"] = this.roleId;
        getList(page.currentPage,page.pageSize,vegetables).then(res => {
          this.data = res.data.data.data;
          this.page.total=res.data.data.count;
          this.loading = false;
        });
      },
      onLoad2() {
        console.log(456);
        if(this.placeId==0 || this.placeId==null || this.placeId==undefined){
          return false;
        }
        this.loading2 = true;
        getimgLb(0,this.roleId,this.userId,this.placeId).then(res => {
          console.log(res);
          this.data2 = res.data.data;
          this.loading2 = false;
        });
      },
      onLoad3(page, vegetables={}){
        this.loading3 = true;
        vegetables["userId"] = this.userId;
        vegetables["roleId"] = this.roleId;
        getList(page.currentPage, page.pageSize,vegetables).then(res => {
          this.data3 = res.data.data.data;
          this.page2.total=res.data.data.count;
          this.loading3 = false;
        });
      },
      onLoad4(page, vage={}){
        if(this.placeId==0 || this.placeId==null || this.placeId==undefined){
          return false;
        }
        this.loading4 = false;
        console.log(this.roleId);
        vage["roleId"]=this.roleId;
        vage["userId"]=this.userId;
        vage["placeId"] = this.placeId;
        console.log(vage);
        getList2(page.currentPage,page.pageSize,vage).then(res=>{
          console.log(res);
          this.data4 = res.data.data.data;
          this.page3.total=res.data.data.count;
          this.loading4 = false;
        })
      },
      onload5(page,params={}){
        params["isClassify"] = true;
        params["userId"] = this.userId;
        params["roleId"] = this.roleId;
        console.log(params);
        this.loading5 = true;
        getList(page.currentPage,page.pageSize,Object.assign(params,this.query)).then(res=>{
          this.loading5 =false;
            if(res.data.code==200){
              this.data5 = res.data.data.data;
              this.page4.total = res.data.data.count;
            }
        })
      },
      selectionChange(list){
        //复选框选中
        this.selectList = list;
      },
      selectionChange2(list){
        //复选框选中
        this.selectListDel = list;
      },
      selectionChange3(list){
        this.selectVegeList = list; 
      },
      sureAdd(){
        var name;
        var addImglist=[];
        if(this.data2.length>5){
          this.$message.error("轮播图建议不超过5张");
          return false;
        }
        if(this.selectList.length>0){
          try{
          this.selectList.forEach(element=>{
            if(element.imglist.length<=0){
              name = element.vegetables+"类目没有参考图"
              throw Error();
            }
            element.imglist.forEach(el=>{
              addImglist.push(el);
            })
        })
        var strjson = JSON.stringify(this.selectList);
        addBasicimg(strjson,0).then(res=>{
           console.log(res);
           if(res.data.code==0){
            this.$message.error(res.data.msg);
           }else if(res.data.code==200){
            this.$message.success(res.data.msg);
            this.onLoad(this.page);
            this.onLoad2();
           }
        }) 
      }catch(err){
          this.$message.error(name);
        }  
      }
      },
      sureDel(){
        this.$confirm('确认删除？')
          .then(_ => {
            if(this.selectListDel.length<=0){
               this.$message.error("请选中要删除的数据");
               return;
            }
            //删除
            var strjson = JSON.stringify(this.selectListDel);
            var that = this;
            Delimg(strjson).then(res=>{
              console.log(res);
              if(res.data.code==200){
                this.$message.success("操作成功");
                setTimeout(function(){
                  that.onLoad2();
                },1000)
              }else{
                 this.$message.error(res.data.msg);
              }
            })
          })
          .catch(_ => {
          });
      },
      sureDel2(){
        this.$confirm('确认删除？')
          .then(_ => {
            if(this.selectListDel.length<=0){
               this.$message.error("请选中要删除的数据");
               return;
            }
            //删除
            // var strjson = JSON.stringify(this.selectListDel);
            // var that = this;
            // Delimg(strjson).then(res=>{
            //   console.log(res);
            //   if(res.data.code==200){
            //     this.$message.success("操作成功");
            //     setTimeout(function(){
            //       that.onLoad2();
            //     },1000)
            //   }else{
            //      this.$message.error(res.data.msg);
            //   }
            // })
          })
          .catch(_ => {
          });
      },
      sure(){
        if(this.item.imglist.length>1){
          this.Editform.checkimg = this.item.imglist[this.Editform.coverimg-1];
        this.Editform.vageId = this.item.vegetablesId;
        if(this.Editform.coverimg==undefined || this.Editform.coverimg==null){
          this.$message.error("请选择图片");
          return false;
        }
        }else if(this.item.imglist.length==1){
          this.Editform.vageId = this.item.vegetablesId;
          this.Editform.checkimg  = this.item.imglist[0];
        }
        console.log(this.Editform);
        if(this.Editform.theme==undefined || this.Editform.theme==null){
          this.$message.error("请输入主题");
          return false;
        }
        if(this.Editform.text==undefined || this.Editform.text==null){
          this.$message.error("请输入文案");
          return false;
        }
        var strjson = JSON.stringify(this.Editform);
        insertBasic(strjson).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.$message.success("成功");
              this.onLoad4(this.page);
            }else{
              this.$message.error(res.data.msg);
            }

        });
      },
      selectClassify(){
        this.searchform["userId"]=this.userId;
        this.searchform["roleId"]=this.roleId;
        getClassifyList(Object.assign(this.searchform, this.query)).then(res=>{
           //treeData
           if(res.data.code==200){
             this.classifydata  = res.data.data;
             console.log(this.classifydata);
           }
        })
      },
      aadClassify(){
        this.dialogVisible = true;
      },
      searchClassify(){
         console.log(this.searchform);
         this.searchform["classifyName"] = this.searchform.classifyName.trim();
         this.selectClassify();
      },
      searchClearClassify(){
        this.searchform={};
        this.selectClassify();
      },
      sureClassify(){
        if (this.classifyform.classifyName == null ||this.classifyform.classifyName.trim() == '' || this.classifyform.classifyName == undefined) {
            this.$message.error("请输入分类标签");
            return false;
        }
        this.classifyform["userId"]=this.userId;
        InsertClassify(this.classifyform).then(res=>{
          if(res.data.code==200){
            this.$message.success("添加成功");
            this.classifyform={};
            this.dialogVisible=false;
            this.selectClassify();
          }else{
            this.$message.error(res.data.msg);
          }
        })
      },
      sureClassify2(){
        if (this.selectVegeList.length<=0) {
            this.$message.error("请选择需要分类的数据");
            return false;
        }
        if (this.selectClassifyId.length<=0) {
            this.$message.error("请选择分类标签");
            return false;
        }
        if (this.selectClassifyId.length>1) {
            this.$message.error("分类标签只能选择一个");
            return false;
        }
        this.selectVegeList.forEach(elem=>{
           elem["classifyId"]=this.selectClassifyId[0];
        })
        UpdateVegeClassify(JSON.stringify(this.selectVegeList)).then(res=>{
          if(res.data.code==200){
            this.$message.success("操作成功");
            this.selectVegeList=[];
            this.selectClassifyId=[];
            this.dialogVisible2=false;
            this.selectClassify();
            this.onload5(this.page4,{});
          }else{
            this.$message.error(res.data.msg);
          }
        })
      },
      removeClassify(){
        if(this.removeClassifyId.length<=0){
          this.$message.error("请至少选择一个移除选项");
          return false;
        }
        this.removeClassifyId.forEach(elem=>{
          elem["classifyId"] = 0;
        });
        UpdateVegeClassify(JSON.stringify(this.removeClassifyId)).then(res=>{
          if(res.data.code==200){
            this.$message.success("操作成功");
            this.removeClassifyId=[];
            this.selectClassify();
            this.onload5(this.page4,{});
          }else{
            this.$message.error(res.data.msg);
          }
        })
      },
      changeClassify(value,elem){
         if(value){
           this.removeClassifyId.push(elem);
         }else{
          this.removeClassifyId=this.removeClassifyId.filter(function(item) {
               return item.vegetablesId !== elem.vegetablesId;
          })
         }
         console.log(this.removeClassifyId);
      },
      handleClose(){
        this.dialogVisible=false;
        this.dialogVisible2=false;
      },
      editClassify(){
        this.dialogVisible2=true;
      },
      handleStatusChange(row){
        if(row.isselect){
          this.selectClassifyId.push(row.classifyId);
        }else{
          this.selectClassifyId=this.selectClassifyId.filter(function(item) {
               return item !== row.classifyId;
          })
        }
      }
      
  }
}

</script>

<style>
.el-collapse-item{
  margin-top: 15px !important;
}
.el-table{
   height: 50vh !important;
 }
.el-divider__text{
  background-color: #909399 !important;
  border-radius: 10px;
  color:white;
}
.del>.el-card{
  padding: 15px !important;
}
</style>


<style lang="scss">
.Children:hover{
  color: #0164fe;
  background-color: #f5f7fa;
}

.el-collapse-item__arrow {
	margin-right: 5px;
	font-size: 15px;
	color: #0164fe;
	// &:before {
	// 	// 要替换的icon
	// 	content: '\e620';
	// 	font-family: 'iconfont';
	// 	font-size: 15px;
	// 	font-style: normal;
	// 	color: #0164fe;
	// 	margin-right: 10px;
	// }
}
.el-collapse-item__arrow.is-active {
	transform: rotate(90deg);
	//margin-top: 14px;
	margin-left: -6px;
	margin-right: 10px;
}
.collapse-title {
	height: 44px !important;
	line-height: 44px;
	flex: 1 0 90%;
	order: 1;
	justify-content: space-between;
}
.el-collapse-item__header {
	height: 44px !important;
	flex: 1 0 auto;
	order: -1;
	background: #e7efff;
	padding: 0 20px;
	border-bottom: 1px solid #ffffff;
}
.collapse-title-right {
	span {
		color: #0e64f1;
		cursor: pointer;
		&:hover {
			text-decoration: underline;
		}
	}
}
.el-collapse-item__content {
	padding: 20px;
}
.el-collapse-item__wrap {
	border: none;
}
</style>


